<template>
  <div>
    <el-card>
      <el-button type="primary" @click="addShow = true">添加</el-button>
      <!-- 列表 -->
      <el-table :data="list" style="width: 100%" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- <pre>
              {{scope.row}}
            </pre> -->
            <el-row v-for="(item, index) in scope.row.children" :key="index" class="bord">
              <el-col :span="8">
                <el-tag closable @close="DEL(scope.row, item.id)">{{
                  item.authName
                }}</el-tag>
                <el-icon class="el-icon-caret-right"></el-icon>
              </el-col>
              <el-col :span="16">
                <el-row v-for="(item1, index1) in item.children" :key="index1" class="bord">
                  <el-col :span="8" class="flex">
                    <el-tag
                      type="success"
                      closable
                      @close="DEL(scope.row, item1.id)"
                      >{{ item1.authName }}</el-tag
                    >
                    <el-icon class="el-icon-caret-right"></el-icon>
                  </el-col>
                  <el-col :span="16">
                    <!-- 第三层 -->
                    <el-row >
                      <el-col :span="24" class="col">
                        <el-tag
                          type="warning"
                          closable
                          @close="DEL(scope.row, item2.id)"
                          v-for="(item2, index2) in item1.children"
                          :key="index2"
                        >
                          {{ item2.authName }}
                        </el-tag>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="#" prop="id" width="80px"> </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
        <el-table-column label="分配权限">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-danger"
              size="mini"
              @click="del(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="info"
              icon="el-icon-s-tools"
              size="mini"
              @click="Right(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加 -->
      <el-dialog title="添加" :visible.sync="addShow">
        <el-form>
          <el-form-item label="用户名称" label-width="120px">
            <el-input v-model="User.username"></el-input>
          </el-form-item>
          <el-form-item label="用户描述" label-width="120px">
            <el-input v-model="User.commit"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addShow = false">取 消</el-button>
          <el-button type="primary" @click="addInfo">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 权限列表 -->
      <el-dialog title="添加" :visible.sync="rightslist">
        <el-tree
          :data="rightlist"
          show-checkbox
          :default-checked-keys="defaultKeys"
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rightslist = false">取 消</el-button>
          <el-button type="primary" @click="setRolesSure">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="添加" :visible.sync="editStatus">
        <el-form>
          <el-form-item label="用户名称" label-width="120px">
            <el-input v-model="editUser.roleName"></el-input>
          </el-form-item>
          <el-form-item label="用户描述" label-width="120px">
            <el-input v-model="editUser.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editStatus = false">取 消</el-button>
          <el-button type="primary" @click="editClick">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
// 角色列表
import { ruser } from "@/axios/https";
// 角色列表添加
import { ruser_add } from "@/axios/https";
// 角色列表删除
import { ruser_del } from "@/axios/https";
// 角色权限删除
import { ruser_Del } from "@/axios/https";
// 角色列表修改前
import { ruser_beforeEdit } from "@/axios/https";
// 角色列表修改后
import { ruser_Edit } from "@/axios/https";
// 角色列表修改权限前
import { ruser_beforeright } from "@/axios/https";
// 角色列表修改权限前
import { ruser_righted } from "@/axios/https";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      list: [],
      // 添加
      addShow: false,
      User: {
        username: "",
        commit: "",
      },
      // 修改
      editStatus: false,
      editUser: {
        roleDesc: "",
        roleName: "",
        roleId: "",
      },
      // 权限id
      rightId: "",
      // 权限列表数据
      rightlist: [],
      rightslist: false,
      defaultProps: {
        children: "children",
        label: "authName",
      },
      // 权限id的列表
      defaultKeys: [],
      // 角色的id
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getUser();
  },
  methods: {
    async getUser() {
      const { data: res } = await ruser("/roles");
      if (res.meta.status !== 200) return;
      this.list = res.data;
    },
    // 添加
    async addInfo() {
      const { data: res } = await ruser_add({
        roleName: this.User.username,
        roleDesc: this.User.commit,
      });
      if (res.meta.status !== 201) return this.$message.error(res.meta.msg);
      this.$message.success(res.meta.msg);
      this.addShow = false;
      this.getUser();
    },
    // 删除
    async del(id) {
      const { data: res } = await ruser_del("roles/" + id);
      if (res.meta.status !== 200) return;
      this.$message.success(res.meta.msg);
      this.getUser();
    },
    // 修改前
    async edit(datas) {
      const { data: res } = await ruser_beforeEdit("/roles/" + datas);
      if (res.meta.status !== 200) return;
      this.editUser = res.data;
      this.editStatus = true;
    },
    // 修改后
    async editClick() {
      const { data: res } = await ruser_Edit(
        "/roles/" + this.editUser.roleId,
        this.editUser
      );
      if (res.meta.status !== 200) return;
      this.$message.success("修改成功");
      this.editStatus = false;
      this.getUser();
    },
    // 分配权限
    async Right(datas) {
      this.getDefaultKeys(datas, this.defaultKeys);
      this.rightId = datas.id;
      const { data: res } = await ruser_beforeright("rights/" + "tree");
      if (res.meta.status !== 200) return;
      this.rightlist = res.data;
      this.rightslist = true;
    },
    // 递归函数
    getDefaultKeys(node, arr) {
      if (!node.children) {
        return arr.push(node.id);
      }
      node.children.forEach((item) => {
        this.getDefaultKeys(item, arr);
      });
    },
    //确定修改权限
    async setRolesSure() {
      const keys = [
        ...this.$refs.tree.getHalfCheckedKeys(),
        ...this.$refs.tree.getCheckedKeys(),
      ];
      let idStr = keys.join(",");
      console.log(idStr);
      console.log(this.rightId);
      const {
        data: res,
      } = await ruser_righted(`/roles/${this.rightId}/rights/`, {
        rids: idStr,
      });
      console.log(res);
      if (res.meta.status !== 200) return this.$message.error("权限设置失败！");
      this.$message.success("权限设置成功");
      this.rightslist = false;
      this.defaultKeys = [];
      this.getUser();
    },
    // 删除
    async DEL(info, rightId) {
      const { data: res } = await ruser_Del(
        `roles/${info.id}/rights/${rightId}`
      );
      console.log(res);
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      info.children = res.data;
      this.$message.success(res.meta.msg);
    },
  },
};
</script>
<style scoped>
.el-table {
  margin-top: 20px;
}
.el-row {
  margin: 10px;
  display: flex;
  text-align: center;
  align-items: center;
}
.bord{
  border-bottom: 1px solid #eee;
}
.el-tag{
  margin: 10px;
}
/* .flex{
  display: flex;
  justify-content: space-around;
} */
</style>